Hace tiempo daleclick nos explicaba como aplicar emoticones en las entradas y los comentarios de nuestra plantilla clásica. Ahora, podemos añadirlos si nos situamos en Plantilla/Añadir un elemento de página/HTML/Javascript y añadimos lo siguiente:

<!--Start BloggerEmoticons
http://bloggeremoticons.be
http://bloggeremoticons.blogspot.com-->

<script type="text/javascript">
<!--

function replaceText() {
// no support
if(!document.getElementById) {
return;
}

bodyText = document.getElementById("body");
theText = bodyText.innerHTML;

// replace
theText = theText.replace(/;\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" alt=";)" />');
theText = theText.replace(/;-\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" alt=";-)" />');
theText = theText.replace(/:D/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif" alt=":D" />');
theText = theText.replace(/:-D/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/biggrin.gif" alt=":-D" />');
theText = theText.replace(/B\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif" alt="B)" />');
theText = theText.replace(/B-\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/cool.gif" alt="B-)" />');
theText = theText.replace(/:x/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":x" />');
theText = theText.replace(/:X/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":X" />');
theText = theText.replace(/:-x/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":-x" />');
theText = theText.replace(/:-X/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/mad.gif" alt=":-X" />');
theText = theText.replace(/:-\(/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif" alt=":-(" />');
theText = theText.replace(/:\(/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/sad.gif" alt=":(" />');
theText = theText.replace(/:o/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":o" />');
theText = theText.replace(/:O/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":O" />');
theText = theText.replace(/:-o/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":-o" />');
theText = theText.replace(/:-O/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/ohmy.gif" alt=":-O" />');
theText = theText.replace(/:p/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":p" />');
theText = theText.replace(/:-p/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":-p" />');
theText = theText.replace(/:-P/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":-P" />');
theText = theText.replace(/:P/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/tongue.gif" alt=":P" />');
theText = theText.replace(/:-\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif" alt=":-)" />');
theText = theText.replace(/:\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/smile.gif" alt=":)" />');

bodyText.innerHTML = theText;
}

-->
</script>

<!--End BloggerEmoticons-->

Guardamos los cambios y nos situamos en Plantilla/Edición HTML buscamos donde dice <body> y lo sustituimos por:

<body id="body" onload="replaceText();"> 

Si queremos que los emoticones sólo se muestren en los comentarios buscamos la línea:
bodyText = document.getElementById("body");
y la sustituimos por:
bodyText = document.getElementById("comments-block");

Anónimo

Oi, achei teu blog pelo google tá bem interessante gostei desse post. Quando der dá uma passada pelo meu blog, é sobre camisetas personalizadas, mostra passo a passo como criar uma camiseta personalizada bem maneira. Até mais.

Responder
alida

Excelentes Gem@a, sabes vengo invitarte a mi blog esta de celebración

Responder
Anónimo

Hola Gemma!! este es mi primer comentario en tu blog, mi más sincero agradecimiento a tus explicaciones, porque me han servido de mucho, te invito a pasear por mi blog ;)

Un saludo

Responder
Gem@

Hola Rodrigo, gracias por el aporte ;)

Alida cumpleaños !Feliz Cumpleblog¡
Gracias por acordarte de mi, espero que este primer año sea sólo el comienzo de muchos más;)

Hola Lolylla, muchas gracias gracias por la invitación y bienvenida ;)

Responder
la-filistea

Gema como hago para enviarte algo sobre un programa para encontrar el codigo del color por medio de tu mouse??...
Me avisas okay?? para ver donde te puedo mandar el programa que es facilisimo para bajar no pesa nada y se baja en menos de un minuto.. y es una exelente herramienta..

Despues de la otra semana puedo enviarte el tutorial. Lo que pasa que por ahora no tengo internet en la casa. Pero a partir del lunes ya esta listo.

Ahh y si me hicieras el favor de decirme como se hace para personalizar ''comentarios''.. Es que en la nueva plantilla no se como hacerlo.
Es decir.. como para escribir, 'escribe aqui un comentario' u otro texto..

Gracias Gem@..

Ciao,ciao

Responder
Gem@

Saludos La Filistea me encanta verte de nuevo por aquí, para enviar algo o contactar conmigo puedes hacerlo a forevergema(arroba)gmail.com es un detalle de tu parte ;)

Para personalizar comentarios es más sencillo de lo que parece.
En esta entrada doy detalles de como cambiar, añadir o sustituir algunas cosas entre ellas ese texto de los comentarios ;)
organizar-elementos
Espero sea esa la respuesta a tu duda si no fuera así házmelo saber por favor :)

Responder
Anónimo

Hola Gema, siempre leo tu blog y me ha sido de gran ayuda.
Es verdad, estos emoticonos si funcionan, lo unico que en el explorer tarda mas en cargar la pagina, algo que es normal pero en Firefox hay cosas que no se ven y en Opera no se ven muy bien los reproductores de musica como por ejemplo los de Goear.
Solo eso queria comentarte.
Excelente blog, sigue asi.
Saludos.

Responder
Anónimo

Hola Gema, te hago una pregunta puedo poner algun emoticon personalizado ?? es que tengo un monton y es tedioso meterse en imageshack subir la imagen porner el codigo de la imagen y haci susesivamente; Chao.

Responder
la-filistea

Muuchas gracias Gema, ya lo hize y fue refacil y no borres por favor el email donde mandartelo porque hasta la otra semana tengo internet en casa para pasarte el programa.

Otra cosa, alguien te escribió en algún lugar que con vos se había dado cuenta sobre ayudar al prójimo , creeme que no lo había tomado en cuenta y me encanta conocer personas en la red que carezcan de todo egoísmo para compartir.

Sin duda me has dado una buena lección.

Abrazotes fuertes!

Responder
Anónimo

Al instalarlos elimina los artilugios HTML5 y si se coloca en agregar un elemento de la pagina entra en conflicto en ello y la pagina queda mal configurada.

Responder
Gem@

Saludos Xavi bienvenido, llevas mucha razón es muy complicado conseguir que se vea en todos los navegadores perfectamente. En esta página publican una serie de servicios online para comprobar cómo se ven las páginas web en diferentes navegadores.

Anónimo puedes añadir cualquier emoticons que tengas.
Si te fijas en el código se repite varias veces:
theText = theText.replace(/;-\)/g,'<img src="http://photos1.blogger.com/blogger/7678/802/1600/wink.gif" alt=";-)" />');
Lo que está en negrita es la url de la imagen que tendrías que subir a un servidor, y en cursiva son las teclas que deberías clicar para que ese emoticon sea visible.
Puedes repetir las veces que quieras esa parte de código para ir incrementando tus emoticones ;)

Saludos amiga Filistea pensando en tu comentario decidí añadir mi dirección de mail en la columna (al principo) así estará más visible para todo aquel que necesite hacer uso de él ;)
Esa persona que comentas fue Macross y yo se lo agradezco al igual que te lo agradezco a ti.
Hay una frase que me gusta mucho dice:
Siempre queda aroma en la mano que regala flores, en este caso las flores son ayuda, y yo estoy segura que hay mucho aroma repartido en Internet :)

anónimo eso tiene solución depende de los artilugios que tengas añadidos :)

Responder
Maximiliano Kerszenbaum

Hola:

Hace tiempo que te visito y te comento que en más de una oportunidad, he recurrido a los recursos que brindás. Sólo quería felicitarte por el trabajo que hacés.

Te mando un gran abrazo desde Bs As.

Max.
El Blog del Guionista

Responder
Gem@

¿Sólo Max? ¿te parece poco dejar el comentario con el poquito tiempo del que disponemos?
Gracias Max :)

Responder
cielo azul

Otra vez yo...
Intentando poner los emoticones en el blog.. tengo que agregar ese código en la parte donde estan las entradas?? agregue un javascript es correcto?? Y luego lo del body.. lo reemplace.. solo que no se porque no aparecen los emoticones..

espero puedas ayudarme!!

Saludos..

Responder
cielo azul

Falsa alarma.. ya quedo !!

mil gracias!!!

Responder
Gem@

Genial Cielo ¿sabes que puedes eliminar ese borde de los emoticones? pero hacerlo equivale a eliminar el de todas las imágenes.
Si te interesa puedes hacer lo siguiente:
Nos situaremos en la plantilla Edición HTML en:

/* Posts

-----------------------------------------------

En esa parte del código encontráremos más abajo .post img {

.post img {

padding:4px;

border:1px solid $bordercolor;

debemos sustituir border:1px por border:0px

Responder
LillyBlog

Hola gema, este truco me funciona. Lo que me preocupa es q cuando añado el elemnto a la pagina como html/js acepta el codigo ese, pero dice error en la pagina:S:S:S:S:S debo preocuparme? (no me sale error en la pagina en el blog, eso es lo bueno)

Responder
Gem@

Lilly el primer código va en:
Plantilla/Añadir un lemento de página/HTML/Javascript.
Lo de js es la extensión del script :(

Responder
Unknown

Hola, como estas :), espero que bien.

Deseo fecilitarte por el blog que me ha servido para modificar mi blog a mi gusto, soy nuevo en esto de los blog, y bueno, mi blog esta vacio xD.

primero me estoy ocupando de configuraciones y cositas asi que voy aprendiendo con tu blog y con muchos otros que hay en Internet.

lo de los Iconos me funciono bien =).

no se si me podrias ayudar con una parte de mi blog, si lo visitas veras que hay un menu arriba: Home,Entries,Comments.
me gustaria saber si me pudieras ayudar para eliminar eso y dejar solo ese fondo negro que tiene, y en lugar de esos botones poner mis botones propios (ya tengo el codigo html de mis botones).

Gracias por darme la inspiracion para mi blog ;).

Responder
Gem@

Ya te contesté aquí Noisuf.

Responder
atajar

muy bueno el truco :d= pero a mi no me funciona

un saludo

Responder
Gem@

admin-atajar lo he comprobado por si había algún error y me funciona perfectamente ;)

Responder
Anónimo

Gem@ me podrias decir que sistema de emoticones usas tu para aplicarlos yo :D gracias

Responder
Gem@

Ester yo uso uno que sólo se añaden a los comentarios, lo añadí basandome en unas explicaciones de J.Miur estuve mirando para darte en enlace directo a esa entrada pero no la localizo. Prueba por si tienes más suerte ;)

Responder
Anónimo

Ya logre encontrarlo gracias amiga besos. :D

Responder
Anónimo

PROVANDO
:) :P ;) :x :D :O :( B)

Responder
Gem@

Me alegra mucho Ester ;)

¿Te gustó la prueba GOGO?

Responder
Nicar

Hola Gema. Este es el primer comentario que hago en tu Blog. Desde febrero, que es cuando empece con este lío del css, html ,java y todo lo demás,visito tu página regularmente. Gracias por todo. Sin tu ayuda y la de unos cuantos más seria imposible que por ejemplo yo tuviera un blog.
Hoy puse los emoticones en el blog. Duró muy poco la alegría porque dejaron de funcionar archivos como el switchicon.js , switchcontent.js o flipBook.js.Supongo que será por incompatibilidad de estos archivos con el script de los emoticones.
¿Sería una buena entrada un post con las incompatibilidades de archivos en Blogger?.
Otra vez gracias por todo .

Responder
Gem@

Si que sería una buena entrada NKR, el problema no es Blogger sino los scripts.
Pero es buena idea ahondar en ese tema ;)

Responder
Juno

Gemaaaaaaaaaaaaaaaaaaaaaa Te amoooooooooooooo jejejejeje sorry... sabes cuantas veces intente estooo ?.... si digo mil, exageraria, pero de 30 seguramente estaré siendo honesta.... y un amigo muy bueno en programación me dijo categoricamente... en blogger, jamas podras hacer eso.... y yo ¬¬ ....jejejeje le pateare su trasero al mostrarle que tu página si pudo, en serio... Gracias mil!!, lo cargaba sobre la plantilla como en la página dicen.... y nunca me funciono, pero así como tu dices... wowww... mujerrr te ganas el cielo :D !! Thx!!

Responder
Gem@

jajajaja que alegría que lo conseguiste Juno :)
Según el script puede alojarse en la plantilla o como elemento de página ;)

Responder
Deivi

Mcuchas gracias Gem@ :D

Responder
Gem@

De nada THE GAME :)
Felices Fiestas.

Responder
Cartoncita Rosa

Es verdad que no se puede hacer esto cuando además tienes el "leer más..." en las entradas...es que probe este en un blog y si me salieron, pero en el que quiero ponerlo no salio :( y pues yo creo q es por eso, la misma razón por la que no habia podido instalarlos antes....:(:(:(:(:(

Responder
Gem@

En un principio eso no debía ser problema VIRIDI@NA, depende también del sistema de leer más que estés usando.
Hay scripts que son incompatibles podría ser eso pero me extraña mucho.

Responder
Anónimo

:)

Responder
Dave

Tengo un problemón Gem@, puse hace unos días los emoticonos y me iban a la perfección, pero hoy lo he comprobado y por culpa del código en "elementos de la página", el HTML, las imágenes de las entradas no se visualizan en opera y google chrome. ¿Cómo puedo solucionar esto? ¿Existe alguna manera o solo puedo quitar los emoticonos?

Responder
Gem@

yz Hola Dave Strife la verdad no sabría que decirte porque no puedo comprobar con esos navegadores, prueba a añadir el script justo antes de </head> así eliminas ese elemento de html y vemos si es ese el problema ;)

Responder
Dave

No te preocupes, hablé con JMiur y lo arreglamos. Quizá podrías indicarlo por si a alguien más le pasa, se trataba de un fallo en la sintaxis del HTML. Esta frase:

bodyText = document.getElementById("body");

Debería ser esto:

bodyText = document.getElementById('comments-block');

Un saludo y gracias por contestar.

Responder
Dave

De esa forma sólo se visualizan los emoticonos en los comentarios, y así no interfiere con la sintaxis del resto de códigos (como era en mi caso, con la sintaxis de las imagenes de los post). Para la pagina principal, usaríamos el post de Vagabundia sobre GreaseMonkey y sus iconos.

Responder
Gem@

yz está muy bien Dave Strife pero es que hay a quien le gustan los emoticonos en las entradas no sólo en los comentarios ;)

Responder
Luz

gracias gema he conseguido tambien lo de los emoticones, ahora tengo que poner la imagen por encima de la caja de comentarios, voy a ver

Responder
Luz

Gema perdona de nuevo, es posible poner emoticones dinámicos en vez de estáticos.

Responder
Gem@

yz Pues vi algo sobre esos emoticones pero no recuerdo si fue en el blog de Rosa o en otro :O

Responder
Natalia Trujillo

Hola Gem@!

creo que soy muy lenta para esto, pero quisiera saber como puedo colocar los smailes así como los tienes tú, en los comentarios. Hice lo que mencionas acá, pero nada, no me sale :(

Ayuda plisss!!!

el blog es el http://elrincondenataliatrujillo.blogspot.com/

gracias de antemano

Responder
Gem@

yz Hola Nataly, es muy sencillo. Copias el código de los emoticones y te diriges a plantilla de diseño donde añadimos los gadgets, editas un nuevo gadget de HTML.. como el que tienes por ejemplo donde añadiste el reloj y en su interior pegas el código de los emoticones.
Guardas los cambios y listo ;)

Responder
Anónimo

Hola Gem@. Gracias por toda la ayuda que me diste.
Puedo ser tu ¨blog de la semana¨?
gracias. Un beso!!!

Responder
Gem@

:: Lo tendré en cuenta HE-MARVEL, pero en un principio establecí una serie de requisitos como por ejemplo que fueran blogs cuya temática aporte información, solidarios, con necesidad de divulgar algún tema que fuera de interés para los demás o que realizan alguna labor altruista.
Casi todos vienen propuestos de la mano de alguien que piensa que merecen que ese blog es de interés y hay necesario hacerlo llegar a los demás. Si accedes al enlace que hay sobre el blog de la semana te darás cuenta de lo que digo.

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top